<template>
  <!-- 头部 -->
  <div>
    <div class="nav">
      <div style="margin-left: 20px">
        <ul class="navul">
          <li @click="home"><van-icon name="wap-home" color="#FF4400" />闲呗首页</li>
          <li>Hi,<a>{{profile1[0].userName}}</a></li>
          <li @click="exit">退出</li>
        </ul>
      </div>
      <div style="float: right">
        <ul class="navultow">
          <li class="mycb1">
            <a @click="publish" class="myxb">发布商品</a>
            <div class="hen"></div>
          </li>
          <li>
            <a @click="activity">活动页</a>
            <div class="hen"></div>
          </li>
          <li>
            <a @click="Registration">活动报名</a>
            <div class="hen"></div>
          </li>
          <li>
            <a @click="ContactUs">联系客服</a>
            <div class="hen"></div>
          </li>
          <li @click="AuctionPage">拍卖首页</li>
        </ul>
      </div>
    </div>

    <!-- 用户资料 -->
    <div class="information">
      <div>
        <el-avatar :src="profile[0].userPhoto" :size="100"></el-avatar>
      </div>
      <div style="margin-left: 30px; margin-top: 20px">
        <h3>昵称：{{ profile[0].userName }}</h3>
        <div>手机号：{{ profile[0].userTel }}</div>
        <div style="color: #b8b5b5; white-space: nowrap">
          注册日期：{{ profile[0].registrationTime }}
        </div>
      </div>
    </div>
    <div class="attention">
      <div>关注（<span style="color: red">{{attentionNumber}}</span>）</div>
      <div style="margin-left: 100px">
        粉丝（<span style="color: red">{{fansNumber}}</span>）
      </div>
    </div>

    <!-- 用户商品 -->
    <div style="width: 900px; margin: 20px auto">
      <el-tabs type="border-card">
        <el-tab-pane label="在售商品">
          <div style="display:flex;flex-wrap: wrap">
            <div v-for="(i,index) in MyGoods"  :key="index" v-show="i.state==myGoodsState" style="margin-left:20px;position: relative;margin-top:20px;">
              <img :src="i.commodityImg" class="Collectimg">
              <div class="CollectName">{{i.commodityName}}</div>
              <span class="CollectMoney">￥{{i.currentPrice}}</span>
              <span class="CollectPrice">￥{{i.originalPrice}}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="该用户评价">
          <div v-for="(i,index) in MyEvaluate" :key="index">
              <div style="margin-top:20px;margin-left:20px;">
                <div style="display:flex;">
                  <div><el-avatar :src="i.photo" :size=45></el-avatar></div>
                  <div style="margin-left:10px;">
                    <h3 v-show="i.anonymous==0">{{i.userName}}</h3>
                    <h3 v-show="i.anonymous==1">*******</h3>
                    <div style="color:#b8b5b5;">{{i.time}}</div>
                  </div>
                </div>
                <div style="margin-top:10px;">{{i.commentsToSeller}}</div>
                <div><img :src="i.commentImg" style="margin-top:20px;"></div>
              </div>
              <el-divider></el-divider>
            </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      profile: [
        //个人信息
        { userPhoto: "" },
      ],
      profile1:[],
      MyGoods: [
        //在售商品
      ],
      MyEvaluate: [
        //用户评价
        // {
        //   name: "张三",
        //   photo:
        //     "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        //   details: "挺不错的一个卖家，挺好说话的，期待下次继续合作",
        //   src: "https://img.alicdn.com/imgextra/i1/11678303/O1CN010k6o772BCp71adQGy_!!11678303.jpg",
        //   time: "2021-1-12",
        // },
        // {
        //   name: "李四",
        //   photo:
        //     "https://img1.baidu.com/it/u=2820222784,2850106904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        //   details: "什么人啊，用一天就破了，说退货也不行",
        //   src: "https://gw.alicdn.com/imgextra/i1/3937219703/O1CN018tKQov2LY1lxgcMTk_!!3937219703-0-C2M.jpg_Q75.jpg_.webp",
        //   time: "2021-8-23",
        // },
        // {
        //   name: "王五",
        //   photo:
        //     "https://img0.baidu.com/it/u=242752498,3264950281&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        //   details: "东西一般般，人品不错",
        //   src: "https://gw.alicdn.com/bao/uploaded/i4/2211829981376/O1CN01UmefyB1M2FkW0hdK5_!!2211829981376.jpg_Q75.jpg_.webp",
        //   time: "2022-3-30",
        // },
      ],
      attentionNumber:0,//关注数量
      fansNumber:0,//粉丝数量
      myGoodsState:0,
    };
  },
  methods: {
    myprofile() {
      //查看用户资料
      this.$axios({
        url: "api/myprofile/get", //rul
        methods: "get", //type
        params: {
          acc: localStorage.getItem('attention'),
        },
      })
        .then((data) => {
          this.profile = data.data.data;
          console.log(this.profile);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    home(){//跳转首页
      this.$router.push('/')
    },
    exit(){//退出登录
      sessionStorage.removeItem('userTel')
      this.$router.push('/')
    },
    publish(){//跳转发布页面
      this.$router.push('ReleaseView')
    },
    activity(){//跳转活动页面
      this.$router.push('ActivityPage')
    },
    Registration(){//跳转活动报名页面
      this.$router.push('HuodongPage')
    },
    AuctionPage(){//跳转拍卖首页
      this.$router.push('AuctionHomepage')
    },
    ContactUs(){//联系客服
      this.$router.push('CustomerChat')
    },
    
  },
  mounted() {
    this.myprofile();
    this.$axios({//查看关注数量
          url:'api/attentionAmount/get',     //rul
          methods:'get',   //type
          params:{
            acc:localStorage.getItem('attention')
          }
      }).then(data=>{
          console.log(data,1098);
          this.attentionNumber=data.data.data[0].number
      }).catch(err=>{
          console.log(err)
      })

    this.$axios({//查看粉丝数量
          url:'api/fansAmount/get',     //rul
          methods:'get',   //type
          params:{
            acc:localStorage.getItem('attention')
          }
      }).then(data=>{
          console.log(data,1113);
          this.fansNumber=data.data.data[0].number
      }).catch(err=>{
          console.log(err)
      })

    this.$axios({//查看在售商品
        url:'api/selectMyGoods/get',     //rul
        methods:'get',   //type
        params:{
          acc:localStorage.getItem('attention')
        }
    }).then(data=>{
        console.log(data,1069);
        this.MyGoods=data.data.data
    }).catch(err=>{
        console.log(err)
    })

    //查看我的评价
    this.$axios({
          url:'api/selectEvaluate/get',     //rul
          methods:'get',   //type
          params:{
            acc:localStorage.getItem('attention')
          }
      }).then(data=>{
          console.log(data,210);
          this.MyEvaluate=data.data.data
      }).catch(err=>{
          console.log(err)
      })

    this.$axios({
          url:'api/myprofile/get',     //rul
          methods:'get',   //type
          params:{
            acc:sessionStorage.getItem('userTel')
          }
      }).then(data=>{
          this.profile1=data.data.data
          console.log(this.profile1,882);
      }).catch(err=>{
          console.log(err)
      })
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

.nav {
  width: 1290px;
  height: 35px;
  /* border: 1px solid red; */
  background-color: #f5f5f5;
  box-shadow: 0px 0px 2px #2999;
  color: #756c6c;
  font-size: 10px;
  cursor: pointer;
  margin: 0 auto;
}

.navul li:hover {
  color: #ff4400;
}

.navul li {
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
  /* text-align: center; */
}

.navultow li {
  position: relative;
  float: left;
  width: 100px;
  height: 30px;
  line-height: 35px;
}

.hen {
  width: 1px;
  height: 10px;
  background-color: rgb(0, 0, 0, 0.2);
  position: absolute;
  top: 11px;
  right: 24px;
  transform: rotate(20deg);
}

.second {
  width: 100px;
  height: 70px;
  box-shadow: 0px 0px 2px #2999;
  display: none;
}

.mycb1:hover .second {
  /* color:#FF4400; */
  display: block;
}

.myxb:hover {
  text-decoration: underline;
  color: #ff4400;
}

.second1:hover {
  color: #ff4400;
  text-decoration: underline;
}

.information {
  display: flex;
  width: 420px;
  margin: 10px auto;
}

.attention {
  display: flex;
  width: 320px;
  margin: 0 auto;
}

.CollectPrice{
  font-size: 10px;
  color: darkgrey;
  margin-left: 20px;
  text-decoration: line-through;
}

.CollectName{
  width: 150px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; 
}
.CollectMoney{
  color: #ff4400;
}
.CollectPrice{
  font-size: 10px;
  color: darkgrey;
  margin-left: 20px;
  text-decoration: line-through;
}

.Collectimg{
  width:150px;
  height:150px
}
</style>